import React, { useEffect } from 'react'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'

const Line = ({ countByWeekDate = {} }) => {
    useEffect(() => {
        let myChart = echarts.init(document.getElementById('line'))
        myChart.setOption({
            title: {
                text: '近七天新闻发布情况'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['发布总数'],
                right: '5%'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: countByWeekDate.Date
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '发布总数',
                    type: 'line',
                    data: countByWeekDate.Count,
                    lineStyle: {
                        color: '#9966FF'
                    }
                }
                // {
                //     name: '科技',
                //     type: 'line',
                //     data: [2, 5, 9, 5, 11, 3, 6],
                //     lineStyle: {
                //         color: '#990033'
                //     }
                // },
                // {
                //     name: '娱乐',
                //     type: 'line',
                //     data: [23, 10, 31, 12, 19, 20, 7],
                //     lineStyle: {
                //         color: '#9900CC'
                //     }
                // },
                // {
                //     name: '游戏',
                //     type: 'line',
                //     data: [12, 31, 16, 20, 12, 9, 17],
                //     lineStyle: {
                //         color: '#CC00CC'
                //     }
                // },
                // {
                //     name: '汽车',
                //     type: 'line',
                //     data: [3, 6, 12, 23, 3, 2, 5],
                //     lineStyle: {
                //         color: '#660099'
                //     }
                // },
                // {
                //     name: '健康',
                //     type: 'line',
                //     data: [20, 30, 23, 19, 23, 21, 19],
                //     lineStyle: {
                //         color: '#CC0066'
                //     }
                // }
            ]
        })
        window.addEventListener('resize', function() {
            myChart.resize()
        })
    }, [])

    return <div id='line' style={{ height: 300 }}></div>
}

export default Line
